<template>
  <div class="headers">
    <el-container>
      <el-header>
        <el-row class="row-bg">
          <el-col :style="{ width: width }" style="
              float: left;
              line-height: 60px;
              border-right: 1px solid #e6e6e6;
              transition: all 0.3s ease 0s;
            ">
            <div class="grid-content bg-purple">Nodejs后台管理系统</div>
          </el-col>
          <el-col style="
              width: auto;
              float: left;
              position: relative;
              left: 10px;
              top: 17.5px;
              z-index: 999;
              cursor: pointer;
            ">
            <i style="font-size: 25px" @click="shrink(true)" v-if="!showshrink" class="el-icon-s-fold"></i>
            <i @click="shrink(false)" style="font-size: 25px" v-if="showshrink" class="el-icon-s-unfold"></i>
          </el-col>
          <el-col class="qphover" style="
              width: auto;
              float: right;
              position: relative;
              right: 134px;
              top: 17.5px;
              z-index: 999;
              cursor: pointer;
            ">
            <i style="font-size: 25px" @click="fullScreen(true)" v-show="!screenShow" class="iconfont iconquanping"></i>
            <i @click="fullScreenOut(false)" style="font-size: 25px" v-show="screenShow"
              class="iconfont iconsuoxiao"></i>
          </el-col>



          <el-col style="
              width: 80px;
              float: right;
              margin-right: 14px;
              cursor: pointer;
            ">
            <el-dropdown trigger="click">
              <div class="grid-content bg-purple">
                <el-avatar :size="55" style="float: left; margin-top: 2.5px" src="../../../static/icon/system.png">
                </el-avatar>
                <span class="nickname">
                  <i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="iconfont iconpersonal">个人中心</el-dropdown-item>
                  <!-- <el-dropdown-item icon="iconfont iconmima">修改密码</el-dropdown-item> -->
                  <span @click="logout()">
                    <el-dropdown-item divided icon="iconfont iconlogout">
                      退出登录
                    </el-dropdown-item>
                  </span>
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script>
  import {
    ApiLogout
  } from "@/api/api";
  export default {
    name: "heads",
    data() {
      return {
        width: "201px",
        showshrink: false,
        screenShow: false,
        body: null
      };
    },

    created() {
      //全屏后其他元素会被覆盖 -- 故采用全屏整个body再将需要全屏的页面置顶
      this.body = document.body

    },
    mounted() {
      window.addEventListener('resize', this.controlFun)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.controlFun)
    },
    methods: {
      logout() {
        // ApiLogout().then(res => {
        //   console.log("退出", res)
        //   if (res.code == 200) {

        //   }
        // })
        localStorage.clear();
        this.$router.push("/");
      },
      shrink(e) {
        this.showshrink = e;
        if (e) {
          this.width = "65px";
        } else {
          this.width = "201px";
        }
        this.$store.commit('showshrinkFunc', e)

      },
      fullScreen(e) {
        this.screenShow = e;
        let rfs = this.body.requestFullScreen || this.body.webkitRequestFullScreen || this.body.mozRequestFullScreen ||
          this.body.msRequestFullScreen,
          wscript
        if (typeof rfs != 'undefined' && rfs) {
          rfs.call(this.body)
          return
        }
        if (typeof window.ActiveXObject != 'undefined') {
          wscript = new ActiveXObject('WScript.Shell')
          if (wscript) {
            wscript.SendKeys('{F11}')
          }
        }
      },


      fullScreenOut(e) {
        this.screenShow = e;
        let exitMethod = document.exitFullscreen || //W3C
          document.mozCancelFullScreen || //FireFox
          document.webkitExitFullscreen || //Chrome等
          document.webkitExitFullscreen //IE11
        if (exitMethod) {
          exitMethod.call(document)
        } else if (typeof window.ActiveXObject !== 'undefined') { //for Internet Explorer
          let wscript = new ActiveXObject('WScript.Shell')
          if (wscript !== null) {
            wscript.SendKeys('{F11}')
          }
        }
      }

    }
  };

</script>

<style scoped>
  .el-header {
    padding: 0;
    text-align: center;
  }

  .headers {
    position: fixed;
    width: 100%;
    height: 60px;
    top: 0;
    z-index: 999;
    background-color: #ff9c56;
    padding: 0;
    overflow: hidden;
    color: #fff;
  }

  .bg-purple {
    height: 60px;
  }

  .nickname {
    width: 100px;
    height: 60px;
    line-height: 60px;
    margin-left: 5px;
    word-wrap: break-word;
  }

  .qphover:hover {
    background: #f1cab3;
    border-radius: 3px;

  }

</style>
